<template>
  <div
    id="rightMenuDom"
    class="right-menu"
    :style="{
      display: status,
      top: top,
      left: left,
    }"
  >
    <ul>
      <!--分为2组渲染-->
      <li>
        <span
          v-for="item in list"
          :key="item.id"
          v-show="item.id <= 3"
          @click="item.handler"
          >{{ item.text }}
        </span>
      </li>
      <li>
        <span
          v-for="item in list"
          :key="item.id"
          v-show="item.id > 3"
          @click="item.handler"
          >{{ item.text }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "",
  setup() {
    const store = useStore();

    const state = reactive({
      status: computed(() => store.getters["contextMenu/status"]),
      top: computed(() => store.getters["contextMenu/top"]),
      left: computed(() => store.getters["contextMenu/left"]),
      list: computed(() => store.getters["contextMenu/list"]),
    });

    onMounted(() => {
      document.addEventListener("mousedown", (event) => {
        if (event.button !== 2) {
          store.commit("contextMenu/setState", {
            status: "none",
          });
        }
      });
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="scss" scoped>
.right-menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 166px;
  height: auto;
  background-color: rgb(242, 242, 242);
  border: solid 1px #c2c1c2;
  box-shadow: 0 10px 10px #c2c1c2;
  display: none;
  border-radius: 5px;
  z-index: 6666;

  ul {
    padding: 0;
    margin: 0;
    font-size: 15px;

    li {
      list-style: none;
      box-sizing: border-box;
      padding: 6px 0;
      border-bottom: 1px solid rgb(216, 216, 217);

      &:nth-child(1) {
        padding-top: 2px;
      }

      &:nth-last-child(1) {
        border-bottom: none;
      }

      span {
        display: block;
        height: 20px;
        line-height: 20px;
        padding-left: 16px;

        &:hover {
          background-color: #0070f5;
          cursor: pointer;
          color: #ffffff;
        }
      }
    }
  }
}
</style>